<template>
  <div class="annualExtremum">
    <div class="header">
      <a-radio-group v-model:value="state.minMaxvalue" button-style="solid" @change="handleChangeRadio">
        <a-radio-button value="min">极小值</a-radio-button>
        <a-radio-button value="max">极大值</a-radio-button>
      </a-radio-group>
    </div>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 图表 -->
      <TableChart :chartOption="state.chartOption" :isShowTable='state.isShowTable' />
      <!-- 侧边栏内容区域 -->
      <div class="basicInfoTableList" :class="{'isShowTable': !state.isShowTable}">
        <TableList
          :tableDataSource="state.tableDataSource"
          :tableColumns="state.tableColumns"
          rowKey="time"
        />
        <!-- 显示隐藏侧边栏内容区域 -->
        <div class="showTableBtn" :class="{'isRotate': !state.isShowTable}" @click="state.isShowTable = !state.isShowTable">
          <Icon icon="tabler:caret-left-filled" size="20" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, watch, inject, onMounted } from 'vue';
  import TableChart from '@/components/TableChart';
  import TableList from '@/components/TableList';
  import setChartOption from './eigenvalueChartOption';
  import { Icon } from '@gui-pkg/components';
  import { getChartTz } from "@/api/realTime/realData";

  defineOptions({ name: 'Eigenvalue' });
  const props = defineProps({
    data: { type: Object },
  });

  const minColumns = [
    { title: '最低前池水位(m)', dataIndex: 'minZ', key: 'minZ', align: 'center' },
    { title: '发生时间', dataIndex: 'minZTm', key: 'minZTm', align: 'center' },
  ]

  const maxColumns = [
    { title: '最高前池水位(m)', dataIndex: 'maxZ', key: 'maxZ', align: 'center' },
    { title: '发生时间', dataIndex: 'maxZTm', key: 'maxZTm', align: 'center' },
  ]

  const years = [];
  let currentYear = new Date().getFullYear();
  for (let i = currentYear - 29; i <= currentYear; i++) {
    years.push(i);
  }
  const state = reactive({
    minMaxvalue: 'max',
    isShowTable: true,
    chartOption: null,
    tableDataSource: null,
    tableColumns: maxColumns,
    yearData: years.reverse()
  });

  const handleChangeRadio = ()=> {
    if (state.minMaxvalue === 'min') {
      state.tableColumns = minColumns;
      state.chartOption = setChartOption(state.tableDataSource, state.minMaxvalue, props.data);
    } else {
      state.tableColumns = maxColumns;
      state.chartOption = setChartOption(state.tableDataSource, state.minMaxvalue, props.data);
    }
  }

  // 后台获取站点数据
  const getStationData = async () => {
    if (props?.data?.stcd) {
      const params = {
        stcd: props?.data?.stcd,
        years: state.yearData.join(','),
        type: ''
      }
      const stationData = await getChartTz('pump', params);
      const dataSourceData = stationData.sort((a, b) => b.year - a.year);
      state.tableDataSource = dataSourceData;
      state.chartOption = setChartOption(dataSourceData, state.minMaxvalue, props.data);
    }
  }

  // 监听是否点击了全屏，重新渲染下
  const modalHeightChange = inject('ModalHeightChange');
  watch(
    () => modalHeightChange.value,
    () => {
      state.chartOption = setChartOption(state.tableDataSource, state.minMaxvalue, props.data);
    }
  );

  onMounted(() => {
    getStationData();
  });
</script>

<style lang="less" rel="stylesheet/less" scoped>
  .annualExtremum {
    width: 100%;
    height: 100%;
    .header {
      width: 100%;
      height: 32px;
      display: flex;
      align-items: center;
      margin-bottom: 18px;
    }
    .content {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;
      align-items: center;
      position: relative;
      .basicInfoTableList {
        width: 390px;
        height: 100%;
        display: flex;
        flex-direction: column;
        position: absolute;
        right: 0;
        transition: all 0.5s;
      }
      .showTableBtn {
        position: absolute;
        top: 40%;
        left: -22px;
        z-index: 200;
        width: 24px;
        height: 120px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        border-radius: 6px;
        transition: all 0.5s;
        transform: translate(0px, -50%) rotate(180deg);
        background: url(@/assets/svg/sideBar.svg) no-repeat;
        span{
          margin-top: -20px;
          font-size: 18px;
          color: #c4c4c4;
          transform: rotate(0deg);
          transition: all 0.3s;
        }
        &:hover{
          span{
            color: #5780fa;
          }
        }
      }
      .isRotate{ span{transform: rotate(180deg);}}
    }
    .isShowTable{
      right: -390px !important;
    }
  }
</style>
